<template>
  <div>
    <top-bar title="详细内容" bgc="background-color:#fff"></top-bar>
    <div style="background: #fff; min-height: 100%; padding:10px;">
      <p style="font-size: 16px;">{{actForm.acttopic}}</p>
      <el-tag
        :type="actForm.affiliated ? 'success': 'danger'"
        class="tags"
        size="mini"
      >{{actForm.affiliated ? '赛事': '活动'}}</el-tag>
      <span
        style="margin-left: 10px;font-size: 12px ;color: #bbb"
      >{{actForm.actType}}({{actForm.actScores}}分)</span>
      <el-link style="margin-left: 10px; font-size: 12px;" type="primary">{{actForm.orgname}}</el-link>
      <span
        style="margin-left: 10px;font-size: 12px ;color: #bbb"
      >{{new Date().getTime() | setTime}}</span>
      <div
        style="width: calc(100% - 80px);margin-top: 10px; padding: 40px; border-top: 1px solid #eee;border-bottom: 1px solid #eee "
      >
        <img :src="logo" style="width: 100px; height: 100px; transform: translateX(65px)" />
      </div>
      <div style="width: 100%; color: #666666" v-html="actForm.actcontent"></div>
    </div>
  </div>
</template>

<script>
import logo from "@/assets/logo.png";
import TopBar from "@/views/component/topBar";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      actForm: {},
      logo
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.$api
        .get(`/api/activity/detail/${this.$route.params.id}`)
        .then(res => {
          console.log(res);
          this.actForm = res.data.data;
        });
    }
  }
};
</script>

<style scoped>
.top-bar {
  display: flex;
  align-items: center;
  height: 10vh;
  padding: 0 20px;
  background-color: #fafafa;
  letter-spacing: 2px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 17px;
  text-transform: capitalize;
}
image {
  width: 300px;
  margin-left: 35px;
}
</style>